@charset "UTF-8";

@import "lib/global";

/* Progress */

.pui-progress {
    font-size: 12px;
    font-size: 1.2rem;
    background: #f6f6f6;
    margin-bottom: 10px;
    margin-bottom: 1rem; 
    @include user-select(none);
    -webkit-touch-callout: none;
    
    @include border-radius(4px);
    @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.15));
    
    &.pui-progress-unshadow {
        @include box-shadow(none);        
    } 
    
    html.no-touch &:hover, &.hover {
        background: #eee;
    }
}

.pui-progress-bar {
    color: #fff;
    position: relative;
    text-align: center;
    padding: 0 5px;
    padding: 0 0.5rem;
    background: $primary-color;
    @include border-top-left-radius(4px);
    @include border-bottom-left-radius(4px);
    
    &.pui-progress-shadow {
        @include box-shadow(0 1px 0 rgba(0, 0, 0, 0.4));
    }
    
    &.pui-progress-mini-text , &.pui-progress-small-text {
        margin-top: 24px;
        margin-top: 2.4rem;
    }
    
    &.pui-progress-mini {
        height: 5px;
        height: 0.5rem;
    }
    
    &.pui-progress-small {
        height: 10px;
        height: 1rem;
    }
    
    span {
        color: $default-text-color;   
        display: block; 
        width: 100%;
        position: absolute;
        top: -20px;
        top: -2rem;
        left: 0;      
    }
    
    &.pui-progress-text-left {
        text-align: left;
    }
    
    &.pui-progress-text-right {
        text-align: right;
    }
    
    &.pui-progress-text-center {
        text-align: center;
    } 
    
    &.pui-progress-default {
      
    }
    
    @each $name, $color in $ui-colors {        
        & .pui-progress-#{$name}, &.pui-progress-#{$name} { 
            background-color: $color;
            
            html.no-touch &:hover, &.hover {
                background-color: darken($color, 10%);
            }
        }
    }
}

.pui-progress-striped, .pui-progress-striped-reverse {  
    .pui-progress-bar {    
        background-image: linear-gradient(-45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
        background-size: 28px 28px;
    }
}

.pui-progress-striped-reverse {
    .pui-progress-bar {
        background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    }  
}
    
@-webkit-keyframes progress-bar-stripes {
    0%   {background-position: 0 0;}
    100% {background-position: 28px 0;}
}

@keyframes progress-bar-stripes {
    0%   {background-position: 0 0;}
    100% {background-position: 28px 0;}
}

.pui-progress-striped, .pui-progress-striped-reverse {
    &.pui-progress-active {
        .pui-progress-bar {
            // IE10+, Webkit
            -webkit-animation: progress-bar-stripes 2s linear infinite;
            animation: progress-bar-stripes 2s linear infinite;
        }
    }
}

.pui-progress-group {
    position: relative;
    display: block;
    overflow: hidden; 

    .pui-progress-bar { 
        float: left;
        display: inline-block; 
    }
    
    .pui-progress-bar:not(:first-child) {
        @include border-radius(0);
    }
}
  
.pui-progress-small-group, .pui-progress-mini-group { 
    overflow: visible;
    margin-top: 24px;
    margin-top: 2.4rem; 

    // 在Android 4.2下不需要 .pui-progress-group-end
    .pui-progress-bar.pui-progress-group-end {
        padding: 0;
        background: #f6f6f6;
        
        @include border-top-right-radius(4px);
        @include border-bottom-right-radius(4px);
        @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.15));  
    
        &.pui-progress-group-end-unshadow {
            @include box-shadow(none);         
        }  
    
        html.no-touch &:hover, &.hover {
            background: #eee;
        }
    }
}
  
.pui-progress-text-group {
    overflow: auto;
    width: 100%; 
    position: absolute;
    top: -20px;
    top: -2rem;
    left: 0;  
    
    span {
        display: block;
        float:left;
    }
}
